let stateAll = false


function getList() {
    let cartListStr = localStorage.getItem('CART-LIST-4.0')
    let cartList = JSON.parse(cartListStr) || []
    let str = `
    <table>
    <tr class="t1">
        <th><input type="checkbox" name="checkboxAll" ${stateAll?'checked':''} class="checkall">全选框</th>
        <th>id</th>
        <th  class="name">商品名称</th>
        <th>商品图片</th>
        <th style="width: 100px;">单价</th>
        <th>数量</th>
        <th style="width: 100px;">总价</th>
        <th>操作</th>
    </tr>
        `
    let arr = cartList.map(item => {

        return `
        <tr class="t2">
        <td><input type="checkbox" name="checksingle" ${item.state?'checked':''} data-index="${item.id}" class="checksingle">单选框</td>
        <td>${item.id}</td>
        <td  class="name">${item.shop} </td>
        <td><img src="${item.picture}" alt=""></td>

        <td style="width: 100px;">￥${item.price} </td>
        <td><input type="button" name="minus" value="-" data-index="${item.id}" ${item.putaway==0?'disabled':''} }><input type="text" name="amout" value="${item.putaway}"><input type="button" name="plus" value="+" data-index="${item.id}"></td>
        <td style="width: 100px;" class="single-price">￥${item.singlePrice==null?`${item.price}`:`${item.singlePrice}`}</td>
         <td><a href="#" class="del" data-index="${item.id}">删除</a></td>
    </tr>
                    `
    }).join('')
    str = str + arr + '</table>'
    str = str + `<h2>商品总价:<span class="total-price">￥${totalPrice()}</span></h2>`
    $('.cart-list').html(str)
}

/**
 * 添加商品
 *   1. 绑定添加事件
 *   2. 获取表单数据
 *   3. 生成商品对象
 *   4. 商品对象添加localStorage
 *   5. 重新渲染页面
 */
//  function onAddCart() {
//     //1. 绑定添加事件
//     $('.add-btn').on('click', function (e) {
//         e.preventDefault() //阻止默认行为action

//         //2. 获取表单数据
//         let name = $('input[name="name"]').val()
//         let price = $('input[name="price"]').val()
//         let num = $('input[name="num"]').val()
//         let url = $('input[name="url"]').val()
//         let id = getRandom(1000, 10000)

//         let singlePrice = price * num
//         // 3. 生成商品对象
//         let product = {
//             id,
//             name,
//             price,
//             num,
//             url,
//             singlePrice,
//             state: false,
//         }
//         //4. 商品对象添加localStorage
//         let cartListStr = localStorage.getItem('CART-LIST-4.0')
//         let cartList = JSON.parse(cartListStr) || []
//         cartList.push(product)
//         localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))

//         // 5. 重新渲染页面
//         loadCartList()
//     })
// }

/**
 * 操作购物车
 */
function onCart() {
    $('.cart-list').on('click', '.del', function (e) {
        let target = e.target || e.srcElement
        /*
           1. 获取删除商品ID
           2. 根据id获取索引号
           3. 删除localStorage中商品
           4. 重新渲染页面
        */
        let id = $(target).attr('data-index')
        //  2. 根据id获取索引号
        let cartListStr = localStorage.getItem('CART-LIST-4.0')
        let cartList = JSON.parse(cartListStr) || []
        let index = cartList.findIndex(item => item.id == id)
        //3. 删除localStorage中商品
        cartList.splice(index, 1)
        localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))
        // 4. 重新渲染页面
        getList()
    })

    $('.cart-list').on('click', 'input[name="plus"]', function (e) {
        let target = e.target || e.srcElement
        /**
           1. 获取商品id
           2. 从localStorage中根据id获取商品
           3. 数量加一
           4. 重新渲染
         */
        let id = $(target).attr('data-index')
        let cartListStr = localStorage.getItem('CART-LIST-4.0')
        let cartList = JSON.parse(cartListStr) || []
        let product = cartList.find(item => item.id == id)
        product.putaway++ //数量加一
        product.singlePrice = (product.putaway * product.price).toFixed(2)
        console.log(product.singlePrice);
        localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))

        getList()
    })

    $('.cart-list').on('click', 'input[name="minus"]', function (e) {
        let target = e.target || e.srcElement
        /**
           1. 获取商品id
           2. 从localStorage中根据id获取商品
           3. 数量加一
           4. 重新渲染
         */
        let id = $(target).attr('data-index')
        let cartListStr = localStorage.getItem('CART-LIST-4.0')
        let cartList = JSON.parse(cartListStr) || []
        let product = cartList.find(item => item.id == id)
        product.putaway-- //数量减一
        if (product.putaway == 0) {
            let index = cartList.findIndex(item => item == id)
            cartList.splice(index, 1)
        }
        product.singlePrice = (product.putaway * product.price).toFixed(2)
        localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))

        getList()
    })

    $('.cart-list').on('click', 'input[name="checkboxAll"]', function (e) {
        stateAll = !stateAll
        let cartListStr = localStorage.getItem('CART-LIST-4.0')
        let cartList = JSON.parse(cartListStr) || []
        // product.singlePrice = (product.putaway * product.price).toFixed(2)
        cartList.forEach(item => item.state = stateAll)
        // localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))

        localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))
        getList()
        totalPrice()
    })

    $('.cart-list').on('click', 'input[name="checksingle"]', function (e) {
        let target = e.target || e.srcElement
        //当前单选框状态取返
        let id = $(target).attr('data-index')
        let cartListStr = localStorage.getItem('CART-LIST-4.0')
        let cartList = JSON.parse(cartListStr) || []
        let product = cartList.find(item => item.id == id)
        product.state = !product.state
        //全选框状态
        stateAll = cartList.every(item => item.state == true) //every:遍历数组，全部项满足条件返回true
        localStorage.setItem('CART-LIST-4.0', JSON.stringify(cartList))

        getList()
        totalPrice()

    })
}

/**
 * 计算总价
 */
// function totalPrice() {
//     let cartListStr = localStorage.getItem('CART-LIST-4.0')
//     let cartList = JSON.parse(cartListStr) || []

//     let total = cartList.reduce((s, item) => s = s + (item.state ? Number(item.singlePrice) : 0), 0)
//     return total.toFixed(2)
// }
// function totalPrice() {
//     let cartListStr = localStorage.getItem('CART-LIST-4.0')
//     let cartList = JSON.parse(cartListStr) || []
//     let total = cartList.reduce((s, item) => s = s + (item.state ? Number(item.singlePrice) : 0), 0)
//     return total.toFixed(2)
// }
function totalPrice() {
    let cartListStr = localStorage.getItem('CART-LIST-4.0')
    let cartList = JSON.parse(cartListStr) || []
    let total = cartList.reduce((s, item) => s = s + (item.state ? Number(item.singlePrice) : 0), 0)
    return total.toFixed(2)


}

    $('.container').on('click','.clear', function () {
        // alert('ma')
        $('.ma').css('display','block')

    })
 $('.container').on('click','.s3',function(){
    $('.ma').css('display','none')
 })

getList()

onCart()